<script lang="ts" setup>
import { ref,onMounted } from 'vue'
import indexJSON from './index.json'

let Indexes = ref<any>(0)

const navigateLink = (i: number) => { Indexes = i }

onMounted(() => {
    myApi.getSenderCookie()
})

</script>


<template>
    <div class="topNav">
        <ul>
            <router-link v-for="(item, i) in indexJSON.topNav" :to="`${item.to}`">
              <li @click="navigateLink(i)" :class="`${Indexes === i ? 'active' : ''}`">{{ item.text }}</li>
            </router-link>
        </ul>
    </div>
    <div class="homeChildExit">
        <router-view />
    </div>
</template>


<style lang="scss" scoped>
.topNav {
    z-index: 1;
    position: fixed;
    top: 60px;
    width: 100%;
    height: 50px;
    margin-left: 1px;
    background-color: $theme-white;

    ul {
        li {
            float: left;
            line-height: 30px;
            margin-left: 30px;
            margin-top: 16px;
            font-family: $textFont;
        }
    }
}

.homeChildExit {
    height: 100%;
    margin: 50px 0 0 30px;
    padding-top: 10px;
    box-sizing: border-box;
}

.active {
    font-family: $activeTextFont !important;
    font-size: $font-size-lg;
    border-bottom-width: 3px;
    border-bottom-style: solid;
    @include border_color('border_color');
    // border-bottom: 3px solid $theme-red;
}
</style>
